<template>
    <div class="container">
      <div class="tips-title">1.基础用法</div>
      <div class="radio">排序：
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div>item
      <br><br><br>
      <el-timeline :reverse="reverse">
        <el-timeline-item v-for="(item, index) in data1" :key="index" :timestamp="item.timestamp">
          {{item.content}}
        </el-timeline-item>
      </el-timeline>
      <div class="tips-title">2.⾃定义节点样式</div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in data2"
          :key="index"
          :icon="item.icon"
          :type="item.type"
          :color="item.color"
          :size="item.size"
          :timestamp="item.timestamp">
          {{item.content}}
        </el-timeline-item>
      </el-timeline>
      <div class="tips-title">3.⾃定义时间戳</div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in data3"
          :timestamp="item.timestamp"
          placement="top"
          :key="index">
          <el-card>
            <h3>{{item.operator}}</h3>
            <p>{{item.user}} 提交于 {{item.timestamp}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
</template>
<script>
  export default {
    name: 'o-timeline',
    data() {
      return {
        reverse: true,
        data1: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }],
        data2: [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }],
        data3: [{
          operator: '更新 Github Demo',
          user: 'bangZZ',
          timestamp: '2020-05-12'
        },{
          operator: '更新 Github Demo',
          user: 'bangZZ',
          timestamp: '2020-05-03'
        },{
          operator: '创建 Github 项目',
          user: 'bangZZ',
          timestamp: '2020-05-02'
        }]
      }
    }
  }
</script>
<style>
</style>
